<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: []
    },
    keyName: {
        type: String,
        default: "Key"
    },
    valueName: {
        type: String,
        default: "Value"
    },
    valueInputType: {
        type: String,
        default: "text"
    },
    readonly: {
        type: Boolean,
        default: false
    },
    height: {
      type: String,
      default: "240px"
    },
    keyWidth: {
      type: String,
      default: ''
    },
    valueWidth: {
      type: String,
      default: ''
    },
    rows:{
      type: null
    },
    keyReadonly:{
      type: Boolean,
      default: false
    },
    valueReadonly:{
      type: Boolean,
      default: false
    },
    showOptions:{
      type: Boolean,
      default: true
    },
})
// 添加行的方法
const addTableRow = ()=> {
  const newRow = {
    key: "",
    value: ""
  }
  // 在列表后面添加数据
  if (props.list == null || props.list == undefined) {props.list = []}
  props.list.unshift(newRow)
}
// 删除行的方法
const deleteTableRow = (index) => {
    props.list.splice(index, 1)
}
</script>

<template>
    <el-table 
        border
        :data="props.list" 
        style="width: 100%"
        :height="props.height"
        >
          <el-table-column align="center" prop="key" :label="props.keyName" :width="props.keyWidth">
            <template #default="scope">
              <el-input :disabled="props.keyReadonly || props.readonly" v-model="scope.row.key"  placeholder="请输入键" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="value" :label="props.valueName" :width="props.valueWidth">
            <template #default="scope">
              <el-input :rows="props.rows"  :disabled="props.valueReadonly || props.readonly" v-model="scope.row.value" :type="props.valueInputType" placeholder="请输入值" />
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" width="140px" v-if="props.showOptions">
            <template #header>
              <el-button :disabled="props.readonly" link type="primary" @click="addTableRow()">添加</el-button>
            </template>
            <template #default="scope">
              <el-button :disabled="props.readonly" link type="warning" @click="deleteTableRow(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>
</template>

<style scoped>

</style>
